

<template>
<div class="modal">
  <div class="modal-wrapper">
    <div class="modal-header">我是标题</div>
    <div class="modal-body">
      我是内容区域
    </div>
    <div class="modal-footer">
      <el-button type="primary" @click="handleClose">关闭</el-button>
    </div>
  </div>

</div>
</template>
<script setup lang="ts">
const emits = defineEmits(['close'])
const handleClose = ()=>{
  emits('close')
}
</script>
<style scoped>
.modal{
  width: 400px;
  height: 300px;
  border: 1px solid skyblue;
  background: skyblue;
  box-shadow: 0 0 5px;
  position: fixed;
  top:30px;
  left: 50%;
  transform: translate(-50%);
}

.modal-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.modal-header {
  height: 40px;
  line-height: 40px;
}
.modal-body{
  flex:1;
}
.modal-footer{
  padding: 10px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
